import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import News from "../views/news/news.vue";

import Play from "../views/play/play.vue";

import Login from "../views/login/login.vue";

import Phone from "../views/login/phone/phone.vue";

import Person from "../views/login/person/person.vue";
import Vip from "../views/login/vip/vip.vue";
import User from "../views/user/user.vue";

// import NotFound from "../views/notfound/404.vue";

import List from "../views/list/list.vue";


import Admin from "../views/admin/admin.vue";

const router = new VueRouter({
  // mode: 'history',  // 默认是哈希 模式  带有#     history 就是去掉 #
  routes: [
    { path: "/", redirect: "/admin" },
    { path: "/news", component: News, name:'newsaaa' },
    { path: "/play", component: Play },
    // 路由的嵌套
    {
      path: "/login",
      component: Login,
      children: [
        // 重定向

        { path: "/login/phone", component: Phone },
        {
          path: "/login/person",
          component: Person,

          //   children:[
          //     {
          //         path:'/login/person/zs',component:ZS
          //     }
          //   ]
        },
        //  嵌套组件这里不需要加 '/'  如果加了则表示根路由
        { path: "vip", component: Vip },
      ],
    },

    //动态路由一
    // {
    //     path:'/user/:id',component:User
    // }
    //方式二 布尔模式
    // {
    //     path:'/user/:id/:name',component:User,
    //     props:true
    // } ,
    //方式三 对象模式
    // {
    //     path:'/user/:id',component:User,
    //     props:{name:'张三',age:18}
    // } ,
    //方式四  函数模式

    // {
    //     path:'/user/:id',component:User,
    //     props:route=>{
    //         return {
    //             id:route.params.id,
    //             name:'张三',
    //             age:19
    //         }
    //     }
    // } ,
    {
      path: "/user/:id",
      component: User,
      props: (route) => ({ id: route.params.id, name: "张三", age: 19 }),
    },

    //编程式导航
    { path: "/list", component: List },

    { path: "/admin", component: Admin },


    // 404 页面写在最后面
    // 路由懒加载 性能优化
    { path: "*", component: ()=>import("../views/notfound/404.vue") },
  ],
});



//全局的路由守卫 
//  router.beforeEach((to,from,next)=>{
//     // to 想要去到哪个组件
//     // from  从哪个组件来得 
//     // next  放行   允许的意思
//     // next('/login')
// next()

// })



export default router;
